<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mario-Style Platformer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom CSS for game elements */
        .game-container {
            position: relative;
            width: 800px;
            height: 400px;
            overflow: hidden;
            background: linear-gradient(to bottom, #87CEEB 50%, #5cb85c 50%);
            border: 4px solid #333;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }
        
        .player {
            position: absolute;
            width: 40px;
            height: 60px;
            background-color: #e74c3c;
            border-radius: 8px;
            transition: transform 0.1s;
            z-index: 10;
        }
        
        .player:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 5px;
            width: 30px;
            height: 10px;
            background-color: #333;
            border-radius: 50%;
        }
        
        .platform {
            position: absolute;
            background-color: #8B4513;
            border: 2px solid #5D4037;
            border-radius: 4px;
        }
        
        .coin {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #FFD700;
            border-radius: 50%;
            border: 2px solid #DAA520;
            animation: spin 2s linear infinite;
            z-index: 5;
        }
        
        .enemy {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: #8E44AD;
            border-radius: 50%;
            border: 2px solid #6C3483;
        }
        
        .flag {
            position: absolute;
            width: 10px;
            height: 100px;
            background-color: #8B4513;
        }
        
        .flag-top {
            position: absolute;
            width: 40px;
            height: 30px;
            background-color: #FF0000;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .jump {
            animation: jump 0.5s ease-out;
        }
        
        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-100px); }
        }
        
        .game-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-900 flex flex-col items-center justify-center min-h-screen p-4">
    <h1 class="text-4xl font-bold text-white mb-4">横版闯关游戏</h1>
    
    <div class="game-container mb-4" id="gameContainer">
        <div class="player" id="player"></div>
        <!-- Platforms, coins, and enemies will be added dynamically -->
        
        <div class="game-overlay" id="startScreen">
            <h2 class="text-4xl font-bold text-white mb-6">Super Adventure</h2>
            <p class="text-xl text-white mb-8">Use arrow keys to move and space to jump</p>
            <button id="startButton" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full text-xl transition duration-300 transform hover:scale-105">
                Start Game
            </button>
        </div>
        
        <div class="game-overlay hidden" id="gameOverScreen">
            <h2 class="text-4xl font-bold text-white mb-6">Game Over</h2>
            <p class="text-xl text-white mb-4">Score: <span id="finalScore">0</span></p>
            <p class="text-xl text-white mb-8">Coins Collected: <span id="finalCoins">0</span></p>
            <button id="restartButton" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full text-xl transition duration-300 transform hover:scale-105">
                Play Again
            </button>
        </div>
        
        <div class="game-overlay hidden" id="winScreen">
            <h2 class="text-4xl font-bold text-white mb-6">Level Complete!</h2>
            <p class="text-xl text-white mb-4">Score: <span id="winScore">0</span></p>
            <p class="text-xl text-white mb-8">Coins Collected: <span id="winCoins">0</span></p>
            <button id="nextLevelButton" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-full text-xl transition duration-300 transform hover:scale-105">
                Next Level
            </button>
        </div>
    </div>
    
    <div class="bg-gray-800 p-4 rounded-lg w-full max-w-md">
        <div class="flex justify-between items-center mb-2">
            <div class="text-white text-xl">
                Score: <span id="scoreDisplay">0</span>
            </div>
            <div class="text-white text-xl">
                Coins: <span id="coinDisplay">0</span>
            </div>
        </div>
        <div class="text-white text-lg">
            Lives: <span id="livesDisplay">3</span>
        </div>
    </div>
    
    <script>
        // Game variables
        const gameContainer = document.getElementById('gameContainer');
        const player = document.getElementById('player');
        const startScreen = document.getElementById('startScreen');
        const gameOverScreen = document.getElementById('gameOverScreen');
        const winScreen = document.getElementById('winScreen');
        const startButton = document.getElementById('startButton');
        const restartButton = document.getElementById('restartButton');
        const nextLevelButton = document.getElementById('nextLevelButton');
        const scoreDisplay = document.getElementById('scoreDisplay');
        const coinDisplay = document.getElementById('coinDisplay');
        const livesDisplay = document.getElementById('livesDisplay');
        const finalScore = document.getElementById('finalScore');
        const finalCoins = document.getElementById('finalCoins');
        const winScore = document.getElementById('winScore');
        const winCoins = document.getElementById('winCoins');
        
        let gameRunning = false;
        let score = 0;
        let coins = 0;
        let lives = 3;
        let level = 1;
        let playerX = 50;
        let playerY = 300;
        let playerVelocityY = 0;
        let playerVelocityX = 0;
        let isJumping = false;
        let gravity = 0.5;
        let platforms = [];
        let coinsArray = [];
        let enemies = [];
        let gameSpeed = 3;
        let cameraOffset = 0;
        let keysPressed = {};
        let gameLoopId;
        
        // Event listeners
        startButton.addEventListener('click', startGame);
        restartButton.addEventListener('click', startGame);
        nextLevelButton.addEventListener('click', nextLevel);
        
        document.addEventListener('keydown', (e) => {
            keysPressed[e.key] = true;
            
            if (e.key === ' ' && !isJumping && gameRunning) {
                jump();
            }
            
            // Start game with space if on start screen
            if (e.key === ' ' && !gameRunning && !startScreen.classList.contains('hidden')) {
                startGame();
            }
        });
        
        document.addEventListener('keyup', (e) => {
            keysPressed[e.key] = false;
        });
        
        // Game functions
        function startGame() {
            // Reset game state
            score = 0;
            coins = 0;
            lives = 3;
            level = 1;
            playerX = 50;
            playerY = 300;
            playerVelocityY = 0;
            playerVelocityX = 0;
            isJumping = false;
            cameraOffset = 0;
            gameSpeed = 3;
            
            // Update UI
            scoreDisplay.textContent = score;
            coinDisplay.textContent = coins;
            livesDisplay.textContent = lives;
            
            // Hide screens
            startScreen.classList.add('hidden');
            gameOverScreen.classList.add('hidden');
            winScreen.classList.add('hidden');
            
            // Clear game elements
            clearGameElements();
            
            // Setup level
            setupLevel(level);
            
            // Position player
            player.style.left = playerX + 'px';
            player.style.bottom = playerY + 'px';
            
            // Start game loop
            gameRunning = true;
            gameLoopId = requestAnimationFrame(gameLoop);
        }
        
        function nextLevel() {
            level++;
            playerX = 50;
            playerY = 300;
            playerVelocityY = 0;
            playerVelocityX = 0;
            isJumping = false;
            cameraOffset = 0;
            gameSpeed = 3 + level;
            
            // Update UI
            scoreDisplay.textContent = score;
            coinDisplay.textContent = coins;
            livesDisplay.textContent = lives;
            
            // Hide win screen
            winScreen.classList.add('hidden');
            
            // Clear game elements
            clearGameElements();
            
            // Setup level
            setupLevel(level);
            
            // Position player
            player.style.left = playerX + 'px';
            player.style.bottom = playerY + 'px';
            
            // Start game loop
            gameRunning = true;
            gameLoopId = requestAnimationFrame(gameLoop);
        }
        
        function clearGameElements() {
            // Remove all platforms, coins, and enemies
            document.querySelectorAll('.platform, .coin, .enemy, .flag, .flag-top').forEach(el => el.remove());
            platforms = [];
            coinsArray = [];
            enemies = [];
        }
        
        function setupLevel(levelNum) {
            // Ground platform
            createPlatform(0, 0, 2000, 40);
            
            // Additional platforms based on level
            if (levelNum === 1) {
                createPlatform(200, 80, 150, 20);
                createPlatform(400, 200, 150, 20);
                createPlatform(600, 150, 150, 20);
                createPlatform(800, 250, 150, 20);
                createPlatform(1000, 180, 150, 20);
                
                // Coins
                createCoin(250, 60);
                createCoin(450, 160);
                createCoin(650, 110);
                createCoin(850, 210);
                createCoin(1050, 140);
                
                // Enemies
                createEnemy(300, 60);
                createEnemy(500, 160);
                createEnemy(700, 110);
                createEnemy(900, 210);
            } else if (levelNum === 2) {
                createPlatform(200, 150, 100, 20);
                createPlatform(350, 250, 100, 20);
                createPlatform(500, 100, 100, 20);
                createPlatform(650, 200, 100, 20);
                createPlatform(800, 150, 100, 20);
                createPlatform(950, 250, 100, 20);
                createPlatform(1100, 100, 100, 20);
                
                // Coins
                createCoin(220, 110);
                createCoin(370, 210);
                createCoin(520, 60);
                createCoin(670, 160);
                createCoin(820, 110);
                createCoin(970, 210);
                createCoin(1120, 60);
                
                // Enemies
                createEnemy(250, 110);
                createEnemy(400, 210);
                createEnemy(550, 60);
                createEnemy(700, 160);
                createEnemy(850, 110);
                createEnemy(1000, 210);
            }
            
            // Flag at the end
            createFlag(1500, 0);
        }
        
        function createPlatform(x, y, width, height) {
            const platform = document.createElement('div');
            platform.className = 'platform';
            platform.style.left = x + 'px';
            platform.style.bottom = y + 'px';
            platform.style.width = width + 'px';
            platform.style.height = height + 'px';
            gameContainer.appendChild(platform);
            
            platforms.push({
                element: platform,
                x: x,
                y: y,
                width: width,
                height: height
            });
        }
        
        function createCoin(x, y) {
            const coin = document.createElement('div');
            coin.className = 'coin';
            coin.style.left = x + 'px';
            coin.style.bottom = y + 'px';
            gameContainer.appendChild(coin);
            
            coinsArray.push({
                element: coin,
                x: x,
                y: y,
                collected: false
            });
        }
        
        function createEnemy(x, y) {
            const enemy = document.createElement('div');
            enemy.className = 'enemy';
            enemy.style.left = x + 'px';
            enemy.style.bottom = y + 'px';
            gameContainer.appendChild(enemy);
            
            enemies.push({
                element: enemy,
                x: x,
                y: y,
                direction: 1, // 1 for right, -1 for left
                speed: 1 + level * 0.5
            });
        }
        
        function createFlag(x, y) {
            const flag = document.createElement('div');
            flag.className = 'flag';
            flag.style.left = x + 'px';
            flag.style.bottom = y + 'px';
            gameContainer.appendChild(flag);
            
            const flagTop = document.createElement('div');
            flagTop.className = 'flag-top';
            flagTop.style.left = x + 'px';
            flagTop.style.bottom = (y + 70) + 'px';
            gameContainer.appendChild(flagTop);
        }
        
        function jump() {
            if (!isJumping) {
                playerVelocityY = 12;
                isJumping = true;
                player.classList.add('jump');
                setTimeout(() => player.classList.remove('jump'), 500);
            }
        }
        
        function checkCollisions() {
            // Check platform collisions
            let onPlatform = false;
            const playerBottom = playerY;
            const playerTop = playerY + 60;
            const playerLeft = playerX;
            const playerRight = playerX + 40;
            
            for (const platform of platforms) {
                const platformTop = platform.y + platform.height;
                const platformBottom = platform.y;
                const platformLeft = platform.x;
                const platformRight = platform.x + platform.width;
                
                // Check if player is above a platform and falling
                if (playerVelocityY <= 0 &&
                    playerBottom <= platformTop &&
                    playerTop > platformTop &&
                    playerRight > platformLeft &&
                    playerLeft < platformRight) {
                    
                    playerY = platformTop;
                    playerVelocityY = 0;
                    isJumping = false;
                    onPlatform = true;
                }
            }
            
            // Apply gravity if not on a platform
            if (!onPlatform && playerY > 0) {
                playerVelocityY -= gravity;
            } else if (playerY <= 0) {
                playerY = 0;
                playerVelocityY = 0;
                isJumping = false;
            }
            
            // Check coin collisions
            for (const coin of coinsArray) {
                if (!coin.collected) {
                    const coinLeft = coin.x;
                    const coinRight = coin.x + 20;
                    const coinBottom = coin.y;
                    const coinTop = coin.y + 20;
                    
                    if (playerRight > coinLeft &&
                        playerLeft < coinRight &&
                        playerTop > coinBottom &&
                        playerBottom < coinTop) {
                        
                        coin.collected = true;
                        coin.element.remove();
                        coins++;
                        score += 100;
                        coinDisplay.textContent = coins;
                        scoreDisplay.textContent = score;
                    }
                }
            }
            
            // Check enemy collisions
            for (const enemy of enemies) {
                const enemyLeft = enemy.x;
                const enemyRight = enemy.x + 30;
                const enemyBottom = enemy.y;
                const enemyTop = enemy.y + 30;
                
                // Check if player is above enemy (jumping on it)
                if (playerBottom <= enemyTop &&
                    playerTop > enemyTop &&
                    playerRight > enemyLeft &&
                    playerLeft < enemyRight &&
                    playerVelocityY < 0) {
                    
                    // Enemy defeated
                    enemy.element.remove();
                    enemies = enemies.filter(e => e !== enemy);
                    score += 200;
                    scoreDisplay.textContent = score;
                    playerVelocityY = 10; // Bounce
                }
                // Check if player collides with enemy from sides or below
                else if (playerRight > enemyLeft &&
                         playerLeft < enemyRight &&
                         playerTop > enemyBottom &&
                         playerBottom < enemyTop) {
                    
                    // Player hit by enemy
                    lives--;
                    livesDisplay.textContent = lives;
                    
                    if (lives <= 0) {
                        gameOver();
                    } else {
                        // Respawn player
                        playerX = 50;
                        playerY = 300;
                        playerVelocityY = 0;
                        playerVelocityX = 0;
                        cameraOffset = 0;
                        updateCamera();
                    }
                }
            }
            
            // Check if player reached the flag
            if (playerX > 1500) {
                winGame();
            }
        }
        
        function moveEnemies() {
            for (const enemy of enemies) {
                // Move enemy
                enemy.x += enemy.direction * enemy.speed;
                enemy.element.style.left = enemy.x + 'px';
                
                // Check if enemy hits platform edge
                let onPlatform = false;
                for (const platform of platforms) {
                    if (enemy.x >= platform.x && 
                        enemy.x + 30 <= platform.x + platform.width &&
                        enemy.y <= platform.y + platform.height &&
                        enemy.y >= platform.y) {
                        
                        onPlatform = true;
                        
                        // Check if at edge of platform
                        if ((enemy.direction === 1 && enemy.x + 30 >= platform.x + platform.width) ||
                            (enemy.direction === -1 && enemy.x <= platform.x)) {
                            enemy.direction *= -1;
                        }
                    }
                }
                
                // If enemy is not on a platform, make it turn around
                if (!onPlatform) {
                    enemy.direction *= -1;
                }
            }
        }
        
        function updateCamera() {
            // Move camera to follow player, but don't go back
            if (playerX > 400 && playerX > cameraOffset) {
                cameraOffset = playerX - 400;
            }
            
            // Apply camera offset to all elements
            gameContainer.style.backgroundPositionX = -cameraOffset * 0.3 + 'px';
            
            player.style.left = (playerX - cameraOffset) + 'px';
            
            for (const platform of platforms) {
                platform.element.style.left = (platform.x - cameraOffset) + 'px';
            }
            
            for (const coin of coinsArray) {
                if (!coin.collected) {
                    coin.element.style.left = (coin.x - cameraOffset) + 'px';
                }
            }
            
            for (const enemy of enemies) {
                enemy.element.style.left = (enemy.x - cameraOffset) + 'px';
            }
            
            // Move flag (it's at 1500)
            document.querySelector('.flag').style.left = (1500 - cameraOffset) + 'px';
            document.querySelector('.flag-top').style.left = (1500 - cameraOffset) + 'px';
        }
        
        function gameOver() {
            gameRunning = false;
            cancelAnimationFrame(gameLoopId);
            
            finalScore.textContent = score;
            finalCoins.textContent = coins;
            gameOverScreen.classList.remove('hidden');
        }
        
        function winGame() {
            gameRunning = false;
            cancelAnimationFrame(gameLoopId);
            
            winScore.textContent = score;
            winCoins.textContent = coins;
            winScreen.classList.remove('hidden');
        }
        
        function gameLoop() {
            if (!gameRunning) return;
            
            // Handle player movement
            if (keysPressed['ArrowRight'] || keysPressed['d']) {
                playerVelocityX = 5;
            } else if (keysPressed['ArrowLeft'] || keysPressed['a']) {
                playerVelocityX = -5;
            } else {
                playerVelocityX = 0;
            }
            
            // Update player position
            playerX += playerVelocityX;
            playerY += playerVelocityY;
            
            // Keep player in bounds
            if (playerX < 0) playerX = 0;
            
            // Update player element
            player.style.left = (playerX - cameraOffset) + 'px';
            player.style.bottom = playerY + 'px';
            
            // Check collisions
            checkCollisions();
            
            // Move enemies
            moveEnemies();
            
            // Update camera
            updateCamera();
            
            // Continue game loop
            gameLoopId = requestAnimationFrame(gameLoop);
        }
    </script>
</body>
</html>